<template>
 <div class="list" ref="wrapper">
    <div class="wrapper">
        <div class="present-area">
            <div class="present-title" ref="present">当前</div>
            <div 
            class="present-button"
            @click="handlepresentClick"
            >{{this.$store.state.city}}</div>
        </div>
        <div class="hot-area">
            <div class="hot-title"> 热门城市</div>
            <div class="hot-list">
                <div 
                class="hot-button" 
                v-for="item of hotCities" 
                :key="item.id"
                @click="handleCurrentClick(item.name)"
                >{{item.name}}</div>   
            </div>
        </div>
        <div class="alph-area">
            <div class="alph-wrapper" v-for="(item,key) of cities" :key="key" :ref="key">
                <div class="alph-title">{{key}}</div>
                    <div class="alph-list">
                        <div class="alph-button border-bottom"
                        v-for="innderItem of item" :key="innderItem.id"
                        @click="handleAlphClick(innderItem.name)"
                        >{{innderItem.name}}</div>   
                    </div>
            </div>
        </div>
     </div>
 </div>
</template>

<script>
import BScroll from 'better-scroll'
import BMap from 'BMap'
export default {
  name: 'locationList',
  props:{
     letter:String,
     cities:Object,
     hotCities:Array
  },
  methods:{
      handleCurrentClick(city){ //点击热门改变home数据
          this.$store.dispatch('change',city)
          this.$router.push('/')
      },
      handleAlphClick(city){ //点击列表改变home 数据
          this.$store.dispatch('change',city)
          this.$router.push('/')
      },
      handlepresentClick(){  //点击当前跳转页面
          this.$router.push('/')
      }
  },
  watch:{
    letter(){  //从父组件传来的数组就是点击li元素时里面的内容 ABCD 热门 当前
        //console.log(this.letter)
        const elementLetter = this.$refs[this.letter] //这里的$refs 就是上面传入的对象，ABCD，加上this.letter 就是A对象,B对象.....
        //console.log(elementLetter)
        const elementPresent = this.$refs.present //固定的，对应的是 ref="present" 当前
        //console.log(elementPresent)
        if(elementLetter){                        //如果内容存在
            //保存内容，使用第零个，从父组件传过来的内容是未定义的，必须要使用一下他的第一个节点
            const element = elementLetter[0]      //保存一下内容，让其等于第零个，因为内容未定义，所以先要使用其中的一个值
            this.scroll.scrollToElement(element)  //scrollToElement(里面是谁就会跳转到谁哪里)
        }else{
            this.scroll.scrollToElement(elementPresent) //如果都不是，就让他跳转到当前
        }
    }
  },
  data(){
      return{
          city:'',
      }
  },
  mounted(){
      this.scroll = new BScroll(this.$refs.wrapper,{
          click:true,
          mouseWheel:{
              speend:20,
              easeTime:300
          }
      })
  }
}
</script>

<style lang="stylus"  scoped>
    .border-bottom
      &:before
        border: .01rem solid  #ccc
    .list
      overflow :hidden
      background :#e9ecf1
      position :absolute
      top:1.12rem
      left :0
      bottom :0
      width :100%
      .hot-list
        overflow :hidden
      .present-title,.hot-title,.alph-title
         margin-left :.4rem
         padding :.4rem 0
      .hot-title
        margin-bottom :-.3rem
      .present-button,.hot-button,.alph-button
         line-height :.44rem
         padding :.2rem .2rem
         background :#fff
      .present-button
         width :84%
         margin-left :.2rem
      .hot-button
         width :15%
         float :left
         margin-left :.2rem
         text-align :center
         margin-top :.2rem
      .alph-button
        width :100%
        clear :both
        padding:.4rem
</style>